import React, {useState} from 'react'
import {Picker, Text, View} from '@tarojs/components'
import {getCurDate} from '@/uitls/uitl'
import PageLoading from '@/components/PageLoading/PageLoading'
import {useReady} from '@tarojs/taro'
import {getCustomization} from '@/services/customization'
import './Customization.scss'


interface CustomItem {
  id: string
  name: string
  summary: string
  picUrl: string
  likeNum: number
}

type Order = 0 | 1 | null

const initAmount = ['100~1000', '1000~1500', '1500~2500', '2500~5000', '5000~10000', '1000以上']

const usePicker = () => {
  const [openOrder, setOpenOrder] = useState<Order>(null)
  const [amountRange] = useState(initAmount)
  const [curIndex, setCurIndex] = useState(0)
  const [date, setDate] = useState(getCurDate)

  function onchangeAmount (e) {
    console.log(e.detail.value)
    setCurIndex(e.detail.value)
  }

  function onchangeDate (e) {
    console.log(e.detail.value)
    setDate(e.detail.value)
  }

  function onPickerClick (order: Order) {
    setOpenOrder(order)
  }

  function oncancel () {
    setOpenOrder(null)
  }

  return {
    openOrder, amountRange, curIndex, date,
    onchangeAmount, onchangeDate, onPickerClick, oncancel
  }
}

const Customization: React.FC = () => {
  let [customData, setCustomData] = useState<CustomItem[]>([])

  const {
    openOrder, amountRange, curIndex, date,
    onchangeAmount, onchangeDate, onPickerClick, oncancel
  } = usePicker()

  useReady(() => {
    getCustomization().then(res => {
      setCustomData(res.records)
    })
  })

  return <View className='container'>
    <View className='customization_title'>个性定制</View>
    <View className='section_wrap'>
      <Picker onChange={onchangeAmount}
        onClick={() => onPickerClick(0)}
        onCancel={oncancel}
        className='section_wrap_picker'
        mode='selector'
        value={curIndex}
        range={amountRange}
      >
        <Text className='section_wrap_content'>金额</Text>
        <Text className={`iconfont section_wrap_icon ${openOrder === 0 ? 'active' : ''}`}>&#xe604;</Text>
      </Picker>

      <Picker onChange={onchangeDate}
        onClick={() => onPickerClick(1)}
        onCancel={oncancel}
        className='section_wrap_picker'
        mode='date'
        start={date}
        end='2022-12-30'
        value={date}
      >
        <Text className='section_wrap_content'>时间</Text>
        <Text className={`iconfont section_wrap_icon ${openOrder === 1 ? 'active' : ''}`}>&#xe604;</Text>
      </Picker>
      <View className='section_wrap_btn'>确定</View>
    </View>
    <View className='menu'>
      {
        customData.length ? customData.map(item => <View className='menu_item' key={item.id}
          style={{backgroundImage: `url(${item.picUrl})`}}
        >
          <View className='menu_item_content'>
            <View className='menu_item_wrap'>
              <View className='menu_item_title'>{item.name}</View>
              <View className='menu_item_text'>{item.summary}</View>
            </View>
            {
              item.likeNum !== 0 ?  <Text className='menu_item_amount'>{item.likeNum}</Text> : <></>
            }
          </View>
        </View>) : <PageLoading />
      }
    </View>
  </View>
}

export default Customization
